<template>
	<view>
		<!-- loading.html -->
		<div class="mask" :style="{display:isVisible}"></div>
		<div class="sk-cube-grid" :style="{display:isVisible}">
			<div class="sk-cube sk-cube-1"></div>
			<div class="sk-cube sk-cube-2"></div>
			<div class="sk-cube sk-cube-3"></div>
			<div class="sk-cube sk-cube-4"></div>
			<div class="sk-cube sk-cube-5"></div>
			<div class="sk-cube sk-cube-6"></div>
			<div class="sk-cube sk-cube-7"></div>
			<div class="sk-cube sk-cube-8"></div>
			<div class="sk-cube sk-cube-9"></div>
		</div>
	</view>
</template>

<script>
	export default {
		name: "loading",
		data() {
			return {
				active: 'block'
			};
		},
		props: ['isVisible'],
		created() {
			const _this = this
			console.log(this.$props.isVisible, '111')
			// this.active = this.$props.isVisible
			setTimeout(function() {
				console.log(_this.$props.isVisible)
			}, 2000)
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	// .Vshow {
	// 	display: none;
	// }

	/* loading.css */
	.sk-cube-grid {
		width: 56px;
		height: 56px;
		/* margin: auto; */
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	.sk-cube-grid::after {
		content: '加载中，请稍后...';
		position: absolute;
		// font-size: 20px;
		bottom: -100%;
		left: 50%;
		transform: translateX(-50%);
		color: #24a8ff;
		width: 200%;
		font-size: 14px;
	}

	.mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #c8e5f5;
		z-index: 1;
	}

	.sk-cube {
		width: 33%;
		height: 33%;
		background-color: #24a8ff;
		float: left;
		animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
	}

	.sk-cube-1 {
		animation-delay: 0.2s;
	}

	.sk-cube-2 {
		animation-delay: 0.3s;
	}

	.sk-cube-3 {
		animation-delay: 0.4s;
	}

	.sk-cube-4 {
		animation-delay: 0.1s;
	}

	.sk-cube-5 {
		animation-delay: 0.2s;
	}

	.sk-cube-6 {
		animation-delay: 0.3s;
	}

	.sk-cube-7 {
		animation-delay: 0s;
	}

	.sk-cube-8 {
		animation-delay: 0.1s;
	}

	.sk-cube-9 {
		animation-delay: 0.2s;
	}

	@keyframes sk-cube-grid-scale-delay {

		0%,
		70%,
		100% {
			transform: scale3D(1, 1, 1);
		}

		35% {
			transform: scale3D(0, 0, 1);
		}
	}
</style>